<template>
    <empty :msg.sync="message" :show-empty="isEmpty"></empty>
    <!-- 组件的模板 -->
    <div class="weui-cells">
        <a class="weui-cell weui-cell_access" href="javascript:;" @click="uploadImage">
            <div class="weui-cell__bd">
                <p>
                    <span class="title" style="vertical-align: middle;">头像</span>
                </p>
            </div>  
            <div class="weui-cell__ft">
                <img style="width: 50px; height: 50px; border-radius: 50px;vertical-align: middle;" :src="imgurl" alt="" v-if="imgurl">
                <img style="width: 50px; height: 50px; border-radius: 50px;vertical-align: middle;" class="avatar" v-else src="http://sta.doumistatic.com/src/image/saas/avatar.png" alt="">
            </div>
        </a> 
        <!-- <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="" v-model="myinfos.real_name" :value="myinfos.real_name" v-if="!real_name_auth"/>
                <p v-else >{{myinfos.real_name}}</p>
            </div>
        </div> -->
    </div>
    <div class="weui-cells">
         <a class="weui-cell" :class="{'weui-cell_access' : !real_name_auth}" href="javascript:;" @click="changeNameFn">
            <div class="weui-cell__bd">
                <p><span class="title">姓名</span></p>
            </div>
            <div class="weui-cell__ft"><span>{{myinfos.real_name}}</span></div>
        </a>
        <a class="weui-cell x-height" :class="{'weui-cell_access' : !real_name_auth}" href="javascript:;" @click="changeSexFn">
            <div class="weui-cell__bd">
                <p><span class="title">性别</span></p>
            </div>
            <div class="weui-cell__ft"><span>{{myinfos.gender}}</span></div>
        </a>
        <a class="weui-cell weui-cell_access" href="dmsaas://SelectProvince">
            <div class="weui-cell__bd">
                <p v-if="cname == '请选择'"><span class="title">地区</span><span class="placeholder"></span></p>
                <p v-else><span class="title">地区</span></p>
            </div>
            <div class="weui-cell__ft"><span>{{cname}} {{dname}}</span></div>
        </a> 
    
    </div>
    <div class="weui-cells">
        <a class="weui-cell weui-cell_access" href="javascript:;" @click="changePhoneFn">
            <div class="weui-cell__bd">
                <p v-else><span class="title">手机号</span></p>
            </div>
            <div class="weui-cell__ft"><span>{{myinfos.mobile}}</span></div>
        </a> 
      <!--   <div class="weui-cell">
            <div class="weui-cell__bd">
                <p><span class="title">手机号</span>{{myinfos.mobile}}</p>
            </div>                
        </div> -->
       <!--  <div class="weui-cell">
            <div class="weui-cell__bd">
                <p><span class="title">微信号</span>{{myinfos.weixin}}</p>
            </div>                
        </div> -->
    </div>
        
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget' 
     */
    import clientUi from 'gapi/clientUi.js'
    import widget from 'gapi/widget.js'
    import commonPage from 'clientApi/commonPage.js'
    import userCenterApi from 'clientApi/userCenterApi.js'
    import cache from 'gapi/cache.js'
    import * as util from 'js/util.js'
    import Empty from 'components/Empty/Empty'
    import KCApiApp from 'clientApi/KCApiApp.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {
            Empty
        },
        data: function(){
            return{
                isEmpty:false,
                message:'暂无个人信息',
                imgurl:'',
                imgurl_edit:'',
                myinfos:{},
                provinceArr:[{
                    province_id:0,
                    short_name:'省'
                }],
                cityArr:[{
                    city_id:0,
                    short_name:'市'
                }],
                districtArr:[{
                    district_id:0,
                    short_name:'区'
                }],
                pname:'',
                cname:'',
                dname:'',
                pid:'',
                cid:'',
                did:'',
                real_name_auth:true,
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                commonPage.getWebViewID((data)=>{
                    console.log('webViewID——————————'+data)
                    cache.setMemoryCache('webViewID',{'webViewID':data})
                })
                
                // /*获取存在缓存里的地区裂变*/
                // cache.getCache('localityData', (data) => {
                //     let tmp = [{province_id:0,short_name:'省'}]
                //     this.provinceArr = tmp.concat(data)
                //     // alert(JSON.stringify(this.provinceArr))
                    
                // })
                // 个人信息初始化
                this.initInfoAjax()
                //编辑个人信息保存提交
                // window.saveResume = () => {
                //     this.submitSaveResume()
                // }
            },
            // 个人信息初始化
            initInfoAjax (){
                util.ajax({
                    url:'/user/info',
                    type:'GET',
                    data:{
                        team_id:0,
                        project_id:0
                    },
                    timeout:10000,
                    success:(obj) => {
                        // alert(JSON.stringify(obj))
                        if(obj&&obj.errno == 0){
                            this.myinfos = obj.data;
                            this.imgurl = obj.data.logo_thumb_url;
                            this.imgurl_edit = obj.data.logo_thumb_url
                            this.pname = obj.data.province_str
                            this.cname = obj.data.city_str
                            this.dname = obj.data.district_str
                            this.pid = obj.data.province_id
                            this.cid = obj.data.city_id
                            this.did = obj.data.district_id
                            this.real_name_auth = obj.data.real_name_auth
                            if(obj.data.province_str == '' || obj.data.city_str == '' || obj.data.district_str == ''){
                                this.cname = '请选择'
                            }
                            cache.deleteCache('addressArrData')
                            let addressKey = {
                                province_id:obj.data.province_id,
                                city_id:obj.data.city_id,
                                district_id:obj.data.district_id
                            }
                            let addressVal = {
                                province_name:obj.data.province_str,
                                city_name:obj.data.city_str,
                                district_name:obj.data.district_str
                            }
                            let saveData = {
                                key:addressKey,
                                value:addressVal
                            }
                            cache.setCache('addressArrData', saveData, 86400*30)
                            // setTimeout( () => {
                            //     $('#provinceId').val(obj.data.province_id).change()
                            //     setTimeout( () => {
                            //         $('#cityId').val(obj.data.city_id).change()
                            //         setTimeout( () => {
                            //             $('#districtId').val(obj.data.district_id).change()
                            //         },10)
                            //     },10)
                            // },10)

                        }else{
                            widget.toast(obj.errmsg)
                        }
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            /*编辑个人信息保存提交*/
            submitSaveResume (){
                let gender_id = this.myinfos.gender == '男' ? 1 : 2
                // let p_txt = $("#provinceId option").not(function(){ return !this.selected }).text()
                // let c_txt = $("#cityId option").not(function(){ return !this.selected }).text()
                // let d_txt = $("#districtId option").not(function(){ return !this.selected }).text()
                if(this.myinfos.real_name == ''){
                    widget.toast('姓名不能为空')
                    return
                }
                if(gender_id == ''){
                    widget.toast('请选择性别')
                    return
                }
                
                // if(p_txt == '省' || c_txt == '市' || d_txt == '区'){
                //     widget.toast('请选择地区')
                //     return
                // }
                // if($("#provinceId").val() == '' || $("#cityId").val() == '' || $("#districtId").val() == ''){
                //     widget.toast('地区不能为空')
                //     return
                // }
                // let data = {
                //     team_id : 0,
                //     project_id : 0,
                //     logo : this.imgurl_edit,
                //     real_name : this.myinfos.real_name,
                //     gender : gender_id,
                //     ad_province_id : $("#provinceId").val(),
                //     ad_city_id : $("#cityId").val(),
                //     ad_district_id : $("#districtId").val()
                // }
                let data = {
                    team_id : 0,
                    project_id : 0,
                    logo : this.imgurl_edit,
                    real_name : this.myinfos.real_name,
                    gender : gender_id,
                    ad_province_id : this.pid,
                    ad_city_id : this.cid,
                    ad_district_id : this.did
                }
                console.log(JSON.stringify(data))
                // commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/user/info/edit',
                    type:'POST',
                    data:data,
                    timeout:10000,
                    success:(obj) => {
                        // console.log(JSON.stringify(obj))
                        // commonPage.loadPageStatus('loadSuccess')
                        if(obj&&obj.errno == 0){
                            //埋点
                            let statisticsLog_data = {
                                event_id: '个人信息-保存',
                                // event_label: data.event_label,(预留，现在不用传此参数)
                                event_param: {
                                    ca_from: 'save',
                                }
                            }
                            // alert(JSON.stringify(statisticsLog_data))
                            KCApiApp.statisticsLog(statisticsLog_data)

                            // widget.toast('保存成功')
                            // commonPage.goBack(1)
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        // commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            /**
             * 上传头像
             */
            uploadImage (){  
                let isEdit = 0;   //isEdit 为 0 不可裁剪，为 1 可裁剪
                clientUi.selectAndUploadImage((data) => {
                    console.log(data)
                    if(data.status == '1'){
                        this.imgurl = util.baseImageDomain+data.imageURL;  // 自加图片路径前缀
                        this.imgurl_edit = data.imageURL;
                        this.submitSaveResume()
                    }
                    
                }, isEdit)
            },
             /**
             * 性别选择
             */
            selectsex (){
                if(this.real_name_auth){
                    return                   
                }else{
                    let that = this;
                    let title = '请选择';
                    let data = { 
                        data1: ['女', '男'] 
                    }
                    let index = data.data1.indexOf(this.myinfos.gender)
                    console.log(index)
                    let select = [index];
                    clientUi.showPicker(data, select, title, (data) => {
                        that.myinfos.gender = data.data1 == 0 ? '女' : '男';
                    })
                }
            },
            /*通过选择省份改变市区*/
            changeCity (id){
                let pId = $("#"+id).val();
                this.districtArr = [{district_id:0,short_name:'区'}]
                for(let i=0; i< this.provinceArr.length; i++) {
                    let provinceInfo = this.provinceArr[i]
                        
                    if(pId == provinceInfo.province_id){
                        let tmp = [{city_id:0,short_name:'市'}]
                        this.cityArr = tmp.concat(provinceInfo.child)
                       return
                    }

                }
            },
            /*通过选择市区改变区域*/
            changeDistrict (id){
                let pId = $("#"+id).val();
                for(let i=0; i< this.cityArr.length; i++) {
                    let cityInfo = this.cityArr[i]
               
                    if(pId == cityInfo.city_id){
                        let tmp = [{district_id:0,short_name:'区'}]
                        this.districtArr = tmp.concat(cityInfo.child)
                       return
                    }

                }
            },
            changeNameFn(){
                if(!this.real_name_auth){
                    location.href = "dmsaas://ChangeMyInfo?urdData=" + encodeURIComponent(`type=1&real_name=${this.myinfos.real_name}`)
                }
            },
            changeSexFn(){
                if(!this.real_name_auth){
                    location.href = "dmsaas://ChangeMyInfo?urdData=" + encodeURIComponent(`type=2&gender=${this.myinfos.gender}`)
                }
            },
            changePhoneFn(){
                location.href = "dmsaas://MyPhoneNum?urdData=" + encodeURIComponent(`type=2&mobile=${this.myinfos.mobile}`)
            },
            updateData(data){
                if(!data)return//兼容ios无操作返回时会触发loadData  并返回 0
                if(data.key === 'real_name'){
                    this.myinfos.real_name = data.value
                }else if(data.key === 'gender'){
                    this.myinfos.gender = data.value
                }else if(data.key.province_id){
                    this.pid = data.key.province_id
                    this.cid = data.key.city_id
                    this.did = data.key.district_id
                    this.pname = data.value.province_name
                    this.cname = data.value.city_name
                    this.dname = data.value.district_name
                    cache.setCache('addressArrData', data, 86400*30)
                }else if(data.key === 'mobile'){
                    this.myinfos.mobile = data.value
                    return
                }
                this.submitSaveResume()
            }
        },
        created(){

            this.init(); 

            // 获取native标题
            commonPage.updateTitleBar({
                backAction: 'goBack',    // 点击返回按钮的动作（即回调函数名称）
                // leftDisplay: false,            // 是否显示左按钮
                // leftText: '',                // 左按钮文案
                leftAction: 'goBack',    // 点击左按钮的动作（即回调函数名称）
                // rightDisplay: true,            // 是否显示右按钮
                // rightText: '保存',            // 右按钮文案
                // rightAction: 'saveResume'    // 点击右按钮的文案（即回调函数名称）
            })
            window.goBack = () => {
                if(this.cname == '请选择' || this.dname == '' || this.pname == ''){
                    widget.toast('请选择地区')
                    return
                }else{
                    commonPage.goBack(1)
                }
            }
            window.loadData = this.updateData
        }
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style>
    .x-style{float: left;height: 44px;line-height: 44px;position: relative;}
    .weui-cell_select .weui-cell__bd:after{border-style:none;}
    .weui-cell_select .weui-cell__bd .x-style:after{
        content: " ";
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 0px 2px 2px 0px;
        border-color: #C8C8CD;
        border-style: solid;
        -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: relative;
        top: -2px;
        position: absolute;
        top: 50%;
        right: 12px;
        margin-top: -3px;
    }
    .weui-cell__ft span{
        font-size:16px;
        color: #999999;
    }
    span.title{
        color: #333!important;
    }
    .weui-cell_access .weui-cell__ft{
        padding-right: 16px;
    }
</style>



